<template>
	<gui-page>
		<template v-slot:gBody>
			<view
			class="gui-bg-white gui-dark-bg-level-3 gui-padding-small">
				<gui-switch-navigation 
				:items="items" 
				@change="navchange" 
				textAlign="center" 
				:isCenter="true" 
				activeDirection="center" 
				:size="0" 
				:margin="20" 
				padding="30rpx" 
				activeLineHeight="4rpx"></gui-switch-navigation>
			</view>
			<view class="content gui-bg-gray" v-if="rindex==0">
				<image src="https://app.lgwisdomunion/static/img/empty-img.3712914e.png" class="img" v-if="showMy"></image>
			</view>
			<view class="content gui-bg-gray" v-if="rindex==1">
				<image src="https://app.lgwisdomunion/static/img/empty-img.3712914e.png" class="img" v-if="showWeek"></image>
			</view>
		</template>
	</gui-page>
</template>
<script>
import graceJS from '@/Grace6/js/grace.js';
export default {
	data() {
		return {
			navItems : [],
			showMy:false,
			showWeek:false,
			items:
				[
				{id:1,name:'我的排行'},
				{id:2,name:'上周排行'},
				],
				rindex:0,
				rId:0,
		}
	},
	onLoad :function(opt){
		console.log(opt)
		this.rId = opt.id
		this.getMyRank()
	},
	methods: {
		navchange:function(index){
			console.log(index);
			this.rindex = index
			if(this.rindex == '2'){
				this.getweek()
			}
		},
		getMyRank(){
			let data = {
				id:this.rId,
				page:1,
				pageSize:20,
				type:this.items[0].id,
				isCom:''
			}
			this.$lg.Get("/APP/asieGateuserRecord/rank",data,(res)=>{
				console.log(res)
				if(res.data.total==0||res.data.rows==null){
					this.showMy=true
				} else {
					
				}
			})
		},
		getweek(){
			let data = {
				id:this.rId,
				page:1,
				pageSize:20,
				type:this.items[1].id,
				isCom:''
			}
			this.$lg.Get("/APP/asieGateuserRecord/rank",data,(res)=>{
				console.log(res)
				if(res.data.total==0||res.data.rows==null){
					this.showWeek=true
				} else {
					
				}
			})
		}
	}
}
</script>
<style scoped>
	.content{
		width: 100%;
		height: 90vh;
		background-color: azure;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.img{
		height: 250rpx;width: 250rpx;
	}
</style>